<template>
	<view class="balance">
		<!-- 头部 -->
		<!-- #ifndef MP-WEIXIN -->
		<public-header :title="title" :dark="dark"></public-header>
		<view class="hei_100"></view>
		<!-- #endif -->
		<!-- end -->
		
		<!-- 内容 -->
		<view class="cont">
				<view>
					<view class="tit">余额（元）</view>
					<view>{{balances.balances}}</view>
				</view>				
				<!-- <view>
					<view class="tit">分享金（元）</view>
					<view>{{balances.brokerage}}</view>
				</view>			 -->
		</view>
		<!-- end -->
		
		<!-- 功能 -->
		<view class="nav padd_32">
			<view class="nav-list clearfix">
				<navigator url="/pageageA/pages/balance/addmoney?type=充值">
					<text class="fl">充值</text>
					<view class="fr">
						<image src="/static/images/r-arrow.png" mode="widthFix" class="fr"></image>
					</view>
				</navigator>
			</view>
			<view class="nav-list clearfix">
				<navigator url="/pageageA/pages/balance/money">
					<text class="fl">账单</text>
					<view class="fr">
						<image src="/static/images/r-arrow.png" mode="widthFix" class="fr"></image>
					</view>
				</navigator>
			</view>
			<!-- <view class="nav-list clearfix">
				<navigator url="/pages/personal/balance/share">
					<text class="fl">分享金</text>
					<view class="fr">
						<image src="/static/images/r-arrow.png" mode="widthFix" class="fr"></image>
					</view>
				</navigator>
			</view> -->
		</view>
		<!-- end -->
	</view>
</template>

<script>
	import PublicHeader from '@/components/PublicHeader.vue';
	import { mapState, mapMutations } from 'vuex';
	export default {
	computed: mapState(['hasLogin', 'uerInfo']),
		components: {
			PublicHeader
		},
		data() {
			return {
				title:'余额',
				dark :true,
				balances: {
					balances: '',
					brokerage: '',
				}
			}
		},
		mounted() {
			let _this = this
			_this.$http.get('/personal/center/getbrokerageandbalances/'+this.uerInfo.userId).
			then(function (response) {
					_this.balances = response.data
			}).catch(function (error) {
				console.log(error);
			});
		},
		methods: {
			
		}
	}
</script>

<style scoped lang="scss">
.cont {
	display: flex;
	height: 100rpx;
	color: #333333;
	font-size: 36rpx;
	line-height: 50rpx;
	text-align: left;
	padding-top: 38rpx;
	padding-bottom: 30rpx;
	background-color: $uni-color1;
}
.cont > view{
	padding: 0 180rpx 0 30rpx;
}
// .cont > view:last-child{
// 	border-left: 1rpx solid rgba(51, 51, 51, 0.3);
// }
.cont > view .tit {
	font-size: 24rpx;
	line-height: 33rpx;
	margin-bottom: 10rpx;
}
.nav{
	margin-top: 16rpx;
}
.nav-list{
	width: 100%;
	height: 104rpx;
	line-height: 104rpx;
	font-size: 34rpx;
	color: #666;
	border-bottom: 1rpx solid #DFDFDF;
}
.nav-list:last-child{
	border: 0 none;
}
.nav-list .fr .fl{
	color: #888;
	font-size: 28rpx;
}
.nav-list .fr image{
	width: 13rpx;
	margin-left: 20rpx;
	margin-top: 42rpx;
}
.nav-list .fr .portrait{
	width: 66rpx;
	height: 66rpx;
	border-radius: 100%;
	background-color: #999;
	margin-top: 20rpx;
}
</style>
